<template>
  <div class="container">
    <el-dialog title="预览文章" :visible="visiblePre" @close="close">
      <h2>{{ currentRow.title }}</h2>
      <p>
        <span>{{ formatDate(currentRow.createTime) }}</span
        >&emsp;&emsp; <span>{{ currentRow.username }}</span
        >&emsp;&emsp;<i class="el-icon-view"></i>&emsp;&emsp;<span>{{
          currentRow.visits
        }}</span>
      </p>
      <div class="content" v-html="currentRow.articleBody"></div>
    </el-dialog>
  </div>
</template>

<script>
import dayjs from 'dayjs'
export default {
  props: {
    visiblePre: {
      type: Boolean,
      default: false
    },
    currentRow: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
    }
  },
  methods: {
    // str='默认值' str如果不传 读取默认值'YYYY-MM-DD'
    formatDate (value, str = 'YYYY-MM-DD hh:m:s') {
      return dayjs(value).format(str)
    },
    close () {
      this.$emit('closeP')
    }
  }
}
</script>

<style scoped lang='sass'>
.content
  border-top: 1px dashed #cccccc
  background: #f5f5f5
  padding: 10px
</style>
